<template>
	<view class="container">
		<view class="background" v-if="user_status == 1"></view>
		<view class="backcolor" v-if="user_status == 1"></view>
		<image class="backimg" v-if="user_status != 1" src="https://hfd.bjlzkj.com/static/index/background.png"
			mode="widthFix"></image>
		<navView :isBack="false" titleColor="#333" backgroundColor=""></navView>
		<!-- 顶部信息栏 -->
		<view class="header" v-if="!userInfo">
			<view class="user-info flex align-center" @tap="gologin">
				<view class="avatar">
					<image src="https://hfd.bjlzkj.com/static/user/avatar.png" mode="aspectFill"></image>
				</view>
				<text class="username">点击登录~</text>
			</view>
			<view class="settings">
				<uni-icons @click="outlogin" type="close" size="24" color="#333"></uni-icons>
			</view>
		</view>
		<view class="header" v-else>
			<view class="user-info flex align-center" @tap="uplogin">
				<view class="avatar">
					<image :src="userInfo.avatar ? userInfo.avatar : 'https://hfd.bjlzkj.com/static/user/avatar.png'"
						mode="aspectFill"></image>
				</view>
				<text class="username" v-if="user_status == 2">{{ userInfo.nickname ? userInfo.nickname : '微信用户'
					}}</text>
				<view class="" v-if="user_status != 2">
					<view class="username">{{ userInfo.nickname ? userInfo.nickname : '微信用户' }}</view>
					<view class="span">
						{{ user_status == 1 ? '超管' : user_status == 2 ? '用户' : user_status == 3 ? '销售' : user_status ==
						4 ? '技术' : user_status == 5 ? "财务" : user_status == 6 ? '行政' : '' }}
					</view>
				</view>
			</view>
			<view class="settings">
				<uni-icons @click="outlogin" type="close" size="24" color="#333"></uni-icons>
			</view>
		</view>


		<!-- 主要内容 -->
		<view class="content" v-if="user_status == 2">
			<!-- 第一行两个卡片 -->
			<view class="cards">
				<view class="card" @tap="$navTo('/pages/projectList/projectList')">
					<image class="card-icon" src="https://hfd.bjlzkj.com/static/user/cart1.png" mode="aspectFit">
					</image>
					<view class="">
						<view class="card-title">项目列表</view>
						<view class="card-subtitle">首页项目情况</view>
					</view>
				</view>
				<view class="card" @tap="$navTo('/subpkg/contract/contractList/contractList')">
					<image class="card-icon" src="https://hfd.bjlzkj.com/static/user/cart2.png" mode="aspectFit">
					</image>
					<view class="">
						<view class="card-title">合同付款</view>
						<view class="card-subtitle">及时进行合同付款</view>
					</view>
				</view>
			</view>

			<!-- 列表 -->
			<view class="list">
				<view class="list-item" @click="handleNavigation('intellectualProperty')">
					<view class="flex align-center">
						<image class="list-icon" src="https://hfd.bjlzkj.com/static/user/icon1.png" mode=""></image>
						<text class="ml-10">知识产权</text>
					</view>
					<uni-icons type="right" size="28rpx" color="#BFBFBF"></uni-icons>
				</view>
				<view class="list-item" @click="handleNavigation('companyInfo')">
					<view class="flex align-center">
						<image class="list-icon" src="https://hfd.bjlzkj.com/static/user/icon2.png" mode=""></image>
						<text class="ml-10">公司信息</text>
					</view>
					<uni-icons type="right" size="28rpx" color="#BFBFBF"></uni-icons>
				</view>
				<view class="list-item" @click="handleNavigation('scoreRevenue')">
					<view class="flex align-center">
						<image class="list-icon" src="https://hfd.bjlzkj.com/static/user/icon3.png" mode=""></image>
						<text class="ml-10">积分返利</text>
					</view>
					<uni-icons type="right" size="28rpx" color="#BFBFBF"></uni-icons>
				</view>
				<view class="list-item" @click="handleNavigation('resourceLibrary')">
					<view class="flex align-center">
						<image class="list-icon" src="https://hfd.bjlzkj.com/static/user/icon4.png" mode=""></image>
						<text class="ml-10">资料库</text>
					</view>
					<uni-icons type="right" size="28rpx" color="#BFBFBF"></uni-icons>
				</view>
			</view>
		</view>
		<view class="content" v-if="user_status != 2">
			<view class="cards2">
				<view class="card" @tap="$navTo('/pages/projectList/projectList')">
					<image class="card-back" src="https://hfd.bjlzkj.com/static/user/card1.png" mode="aspectFit">
					</image>
					<view class="card-title">项目列表</view>
				</view>
				<view v-if="user_status == 3" class="card" @tap="$navTo('/subpkg/userList/userList')">
					<image class="card-back" src="https://hfd.bjlzkj.com/static/user/card2.png" mode="aspectFit">
					</image>
					<view class="card-title">客户列表</view>
				</view>
				<view v-if="user_status == 4" class="card" @tap="$navTo('/pages/projectList/list')">
					<image class="card-back" src="https://hfd.bjlzkj.com/static/user/card1.png" mode="aspectFit">
					</image>
					<view class="card-title">项目进度</view>
				</view>
				<view v-if="user_status == 5" class="card" @tap="$navTo('/subpkg/invoice/invoiceList')">
					<image class="card-back" src="https://hfd.bjlzkj.com/static/user/card1.png" mode="aspectFit">
					</image>
					<view class="card-title">开票管理</view>
				</view>
				<view v-if="user_status == 6 || user_status == 1" class="card" @tap="$navTo('/pages/user/userlist')">
					<image class="card-back" src="https://hfd.bjlzkj.com/static/user/card1.png" mode="aspectFit">
					</image>
					<view class="card-title">员工管理</view>
				</view>
			</view>
			<!-- 列表 -->
			<view class="list">
				<view class="list-item" @click="handleNavigation(item)" v-for="(item, index) in list" :key="index">
					<view class="flex align-center">
						<image class="list-icon" :src="item.image" mode=""></image>
						<text class="ml-10">{{ item.name }}</text>
					</view>
					<uni-icons type="right" size="28rpx" color="#BFBFBF"></uni-icons>
				</view>
			</view>
		</view>
		<tabBarView page="/pages/user/user" :status="user_status"></tabBarView>
	</view>
</template>

<script>
export default {
	data() {
		return {
			user_status: 3,
			list: [],
			userInfo: null
		};
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
		this.user_status = this.userInfo.role
		this.initRoleBasedData()
		this.$request('/addons/qingdong/staff/getInfo', 'GET').then(res => {
			console.log(res)
			this.userInfo = res.data
			uni.setStorageSync('userInfo', res.data)
		})
	},
	onShow() {
		this.userInfo = uni.getStorageSync('userInfo')
		const newStatus = this.userInfo?.role
		if (newStatus !== this.user_status) {
			this.user_status = newStatus
			// 状态变化时重新初始化
			this.initRoleBasedData()
		}
	},
	methods: {
		outlogin() {
			uni.showModal({
				title: '提示',
				content: '确定要退出登录吗？',
				success: (res) => {
					if (res.confirm) {
						// 清除本地存储
						uni.removeStorageSync('userInfo')
						uni.removeStorageSync('token')

						// 重置用户状态
						this.userInfo = null
						this.user_status = 3

						// 跳转到登录页
						this.$navTo('/pages/login/login')
						uni.reLaunch({
							url: '/pages/login/login'
						})
					}
				}
			})
		},
		initRoleBasedData() {
			if (this.user_status == 1) {
				this.list = [
					{
						name: '消息',
						image: 'https://hfd.bjlzkj.com/static/user/list1.png',
						url: '/pages/message/message'
					}, {
						name: '积分榜',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/ranking/ranking'
					},
					{
						name: '请假管理',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/subpkg/attendance/leave'
					}, {
						name: '薪资',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/subpkg/attendance/salary'
					}]
			}
			if (this.user_status == 3) {
				this.list = [{
					name: '消息',
					image: 'https://hfd.bjlzkj.com/static/user/list1.png',
					url: '/pages/message/message'
				}, {
					name: '报告',
					image: 'https://hfd.bjlzkj.com/static/user/list2.png',
					url: '/pages/user/report'
				}]
			}
			if (this.user_status == 4) {
				this.list = [
					{
						name: '消息',
						image: 'https://hfd.bjlzkj.com/static/user/list1.png',
						url: '/pages/message/message'
					}, {
						name: '报告',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/user/report'
					},
					{
						name: '收集箱',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/dataBank/dataBank?type=1'
					}, {
						name: '资料库',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/dataBank/dataBank'
					}]
			}
			if (this.user_status == 5) {
				this.list = [
					{
						name: '消息',
						image: 'https://hfd.bjlzkj.com/static/user/list1.png',
						url: '/pages/message/message'
					}, {
						name: '报告',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/user/report'
					},
					{
						name: '收集箱',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/dataBank/dataBank?type=1'
					}, {
						name: '资料库',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/dataBank/dataBank'
					}]
			}
			if (this.user_status == 6) {
				this.list = [
					{
						name: '消息',
						image: 'https://hfd.bjlzkj.com/static/user/list1.png',
						url: '/pages/message/message'
					}, {
						name: '积分榜',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/pages/ranking/ranking'
					},
					{
						name: '请假管理',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/subpkg/attendance/leave'
					}, {
						name: '薪资',
						image: 'https://hfd.bjlzkj.com/static/user/list2.png',
						url: '/subpkg/attendance/salary'
					}]
			}
		},
		handleNavigation(routeName) {
			console.log(routeName, 'routeName')
			if (this.user_status == 2) {
				if (routeName === 'intellectualProperty') {
					uni.navigateTo({
						url: '/pages/knowledge/knowledge'
					});
				} else if (routeName === 'companyInfo') {
					uni.navigateTo({
						url: '/pages/company/company'
					});
				} else if (routeName === 'scoreRevenue') {
					uni.navigateTo({
						url: '/pages/Bonus/Bonus'
					});
				} else if (routeName === 'resourceLibrary') {
					uni.navigateTo({
						url: '/pages/upfile/upfile'
					});
				}
			} else {
				uni.navigateTo({
					url: routeName.url
				})
			}
		},
		gologin() {
			this.$navTo('/pages/login/login')
		},
		login() {
			uni.login({
				provider: 'weixin', //使用微信登录
				success: function (loginRes) {
					console.log(loginRes.authResult);
					console.log(loginRes)
					this.$request('/addons/qingdong/staff/wxlogin', 'POST', {
						code: loginRes.code
					}).then(res => {
						console.log(res)
						uni.setStorageSync('token', res.data.data.user.token)
					})
				}
			});
		}
	},
};
</script>

<style scoped lang="scss">
.backimg {
	width: 100%;
	position: fixed;
	left: 0;
	top: 0;
	z-index: -1;
}

.background {
	background: #F3F4F8;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
}

.backcolor {
	background: linear-gradient(to bottom, #CCE7FF 60%, #F3F4F8);
	width: 100%;
	height: 320rpx;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -10;
}

.container {
	padding: 20rpx;
}

/* 顶部信息栏 */
.header {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40rpx;
}

.user-info {
	height: 60rpx;
	display: flex;
	align-items: center;

	.avatar {
		width: 118rpx;
		height: 118rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.avatar image {
		width: 100%;
		height: 100%;
	}

	.username {
		margin-left: 10px;
		font-size: 44rpx;
		font-weight: bold;
	}

	.span {
		margin-left: 10px;
		font-size: 24rpx;
		color: #9F9F9F;
	}
}



/* 主要内容 */
.content {
	width: 100%;
	box-sizing: border-box;
	margin-top: 50rpx;

	.cards {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.card {
			width: calc(48%);
			height: 132rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 15rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			box-sizing: border-box;
			flex-wrap: wrap;

			.card-icon {
				width: 70rpx;
				height: 70rpx;
			}

			.card-title {
				font-size: 28rpx;
			}

			.card-subtitle {
				font-size: 20rpx;
				color: #666;
				margin-top: 10rpx;
			}
		}
	}

	.cards2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.card {
			width: calc(48%);
			height: 132rpx;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 15rpx;
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
			display: flex;
			align-items: center;
			box-sizing: border-box;
			flex-wrap: wrap;
			color: #fff;
			position: relative;

			.card-back {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			.card-title {
				width: 100%;
				display: block;
				font-size: 28rpx;
				position: relative;
				text-align: right;
				padding-right: 40rpx;
			}
		}
	}


}



.list {
	width: 100%;
	padding: 20rpx 10rpx;
	border-radius: 16rpx;
	background-color: #fff;
	box-sizing: border-box;
}

.list-item {
	width: 100%;
	padding: 20rpx 15rpx;
	box-sizing: border-box;
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.list-item:last-child {
	border-bottom: none;
}

.list-icon {
	width: 32rpx;
	height: 32rpx;
	margin-right: 10rpx;
}

.mr-10 {
	margin-right: 10rpx;
}

.ml-10 {
	margin-left: 10rpx;
}

.flex {
	display: flex;
}

.align-center {
	align-items: center;
}
</style>